<!DOCTYPE html>
<html>

<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link type="text/css" href="/css/cultivateWeb/style/news.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/teach.css" rel="stylesheet">
<link href="../static/css/bootstrap.min.css" rel="stylesheet">

<body>
    <style>
        .left {
            float: left
        }

        .left span {
            font-size: 20px;
        }

        .active1 {
            border-bottom: 2px solid #005C34;
            color: #005C34
        }

        .spanChange:hover {
            cursor: pointer
        }

        .spanChange {
            margin: 0 10px
        }

        #title_box {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 600;
            background-color: #fafafa;
            border: 1px solid #ededed;
            padding: 10px;
        }

        .title_txt {
            width: 100%;
            height: 300px;
            background: #f2f2f2;
        }

        .title_txt li a {
            display: flex;
            flex-direction: column;
            height: 30px;
            line-height: 30px;
        }

        .more_citys {
            display: none;
            width: 80%;
            height: 100px;
            position: absolute;
            top: 5%;
            padding: 10px 60px 10px 0;
            background-color: #fafafa;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        /* #title_box li {
        padding: 5px 0;
        display: flex;
        flex-direction: column
    } */
        .filter_box {
            margin: 20px 0
        }

        /* .filter_box ul span,
    .more_citys span {
        font-weight: 600;
        font-size: 16px;
    } */

        .filter_box ul a,
        .more_citys a {
            font-size: 14px;
            cursor: pointer;
            padding: 2px 5px;
            margin-right: 5px;
        }

        .filter_box .active {
            background-color: #00b38a;
            color: #fff
        }

        .filter_box li a:hover,
        .more_citys a:hover {
            background-color: #00b38a;
            color: #fff
        }

        .filter_box .more_btn {
            position: relative;
            z-index: 11;
            float: right;
            margin-top: -35px;
            padding-top: 11px;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            background-color: transparent;
            font-weight: 400;
            color: #555;
        }

        .more_btn i {
            position: absolute;
            top: 50%;
            right: -25%;
            border-width: 6px 6px 0;
            border-style: solid dashed;
            border-color: #00b38a transparent transparent;
        }

        .noData {
            text-align: center;
            font-weight: 600;
            font-size: 16px;
            margin-top: 20px;
            color: #999
        }

        .title_txt li {
            display: none;
        }

        .title_txt .title_selected {
            display: block;
        }
    </style>
    <!-- 顶部导航 -->
    <header th:include="cultivateWeb/header :: header"></header>
    <div style="clear: both"></div>
    <div style="background-color: #f7f7f7; ">
        <div class="container">
            <div class="row">
                <div style="height: 40px">
                    <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 应聘就业
                    </p>
                </div>

                <div style="background-color: #f7f7f7; width: 100%; margin: 0 auto">
                    <div style="width:100%;margin-bottom: 50px;">
                        <!-- 招聘查询 -->
                        <section id="zp">
                            <div>
                                <div class="left" style="display: none">
                                    <span data-type="0" class="active1 spanChange">热门</span>
                                    <span data-type="1" class="spanChange">最新</span>
                                </div>
                                <input type="text" id="name" style="width:60%;border-radius: 30px; margin:0 10px"
                                    class="form-control query_1" placeholder="请输入岗位关键字" />
                                <input type="button" onclick="find();" value="搜索" style="width: 25%;" class="but" />
                                <div style="clear: both"></div>
                            </div>
                            <div class="filter_box">
                                <ul id="title_box">
                                    <li>经验</li>
                                    <li>学历</li>
                                    <li>规模</li>
                                    <li>类型</li>
                                    <li>薪资</li>
                                </ul>
                                <ul class="title_txt" style="display: none;">
                                    <!-- <li id="city" style="display: none;">
                            <span>工作地点：</span>
                            <a class="active" onclick="selectBtn(0,null,this)">不限</a>
                            <a onclick="selectBtn(0,'北京',this)">北京</a>
                            <a onclick="selectBtn(0,'上海',this)">上海</a>
                            <a onclick="selectBtn(0,'深圳',this)">深圳</a>
                            <a onclick="selectBtn(0,'广州',this)">广州</a>
                            <a onclick="selectBtn(0,'杭州',this)">杭州</a>
                            <a onclick="selectBtn(0,'成都',this)">成都</a>
                            <a onclick="selectBtn(0,'南京',this)">南京</a>
                            <a onclick="selectBtn(0,'武汉',this)">武汉</a>
                            <a onclick="selectBtn(0,'长沙',this)">长沙</a>
                            <a onclick="selectBtn(0,'西安',this)">西安</a>
                            <a onclick="selectBtn(0,'厦门',this)">厦门</a>
                            <a onclick="selectBtn(0,'苏州',this)">苏州</a>
                            <a onclick="selectBtn(0,'天津',this)">天津</a>
                            <a onclick="selectBtn(0,'重庆',this)">重庆</a>
                            <a onclick="selectBtn(0,'郑州',this)">郑州</a>
                        </li> -->
                                    <!-- <div class="more_citys">
                            <span>工作地点：</span>
                            <a>北京</a>
                            <a>上海</a>
                            <a>深圳</a>
                            <a>广州</a>
                            <a>杭州</a>
                            <a>成都</a>
                            <a>南京</a>
                            <a>武汉</a>
                            <a>长沙</a>
                            <a>西安</a>
                            <a>厦门</a>
                            <a>苏州</a>
                            <a>天津</a>
                            <a>重庆</a>
                            <a>郑州</a>
                        </div> -->
                                    <!-- <a class="more_btn">更多<i></i></a> -->
                                    <!--<li style="height: 90px;background: #fff;padding-left: 15px;border-top: 1px dashed #ccc;border-bottom: 1px dashed #ccc;">-->
                                    <!--    <span>行政区：</span>-->
                                    <!--    <a class="active">雨花区</a>-->
                                    <!--</li>-->

                                    <li id="experience" class="title_conter">

                                    </li>
                                    <li id="education" class="title_conter">

                                        <a class="active" onclick="selectBtn(2,null,this)">不限</a>
                                        <a onclick="selectBtn(2,'中职/中专/职高',this)">中职/中专/职高</a>
                                        <a onclick="selectBtn(2,'高中',this)">高中</a>
                                        <a onclick="selectBtn(2,'大专',this)">大专</a>
                                        <a onclick="selectBtn(2,'本科',this)">本科</a>
<!--                                        <a onclick="selectBtn(2,'研究生',this)">研究生</a>-->
                                        <a onclick="selectBtn(2,'硕士研究生',this)">硕士研究生</a>
                                        <a onclick="selectBtn(2,'博士研究生',this)">博士研究生</a>
                                    </li>

                                    <li id="scale" class="title_conter">

                                        <a class="active" onclick="selectBtn(3,null,this)">不限</a>
                                        <a onclick="selectBtn(3,'0-20人',this)">0-20人</a>
                                        <a onclick="selectBtn(3,'20-99人',this)">20-99人</a>
                                        <a onclick="selectBtn(3,'100-499人',this)">100-499人</a>
                                        <a onclick="selectBtn(3,'500-1000人',this)">500-1000人</a>
                                        <a onclick="selectBtn(3,'1000人以上',this)">1000人以上</a>
                                    </li>

                                    <li id="industry" class="title_conter">


                                    </li>

                                    <li id="money" class="title_conter">

                                    </li>
                                </ul>
                            </div>
                            <!-- <hr style="width: 1190px;margin: auto" /> -->
                            <div style="width:100%;margin: auto" id="table"></div>
                        </section>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer ------------------------------------------------------- -->
    <div class="footer" th:include="cultivateWeb/header :: footer"></div>
    <script type="text/javascript" src="/js/xlPaging.js"></script>
</body>
<script>

    var selectedList = [null, null, null, null, null, null];//index: 0工作地点,1工作经验,2学历要求,3公司规模,4岗位类型,5薪资要求
    function apply(id) {
        ajaxToken("/jzApi/recruitment/addResume", "POST", { id: id }, function (res) {
            layer.confirm("投递成功，请静候佳音！");
        });
    }

    function find() {
        var name = $("#name").val();
        recruit(name, 0)
    }
    $('#title_box li').click(function (event) {
        $('.title_txt').show()
        $('.title_txt li').eq($(this).index()).addClass('title_selected');
        $('.title_txt li').eq($(this).index()).siblings().removeClass('title_selected');
    })
   
    $(function () {
        recruit("", 0);
        $(".spanChange").click(function () {
            $(this).addClass("active1");
            $(this).siblings().removeClass("active1");
            recruit("", $(this).attr("data-type"));
        })
    });
    // $('.more_btn').mousemove(function () {
    //     $('.more_citys').show();
    // });
    $('.more_citys a').click(function () {
        $('.more_citys').hide();
    });
    // $('.filter_box').mouseout(function () {
    //     $('.more_citys').hide();
    // });
    function recruit(name, type) {
        $.ajax({
            url: '/jzApi/recruitment/selJobList',
            data: {
                current: 1,
                number: 10,
                name: name,
                type: type,
                city: selectedList[0],
                experience: selectedList[1],
                education: selectedList[2],
                scale: selectedList[3],
                postName: selectedList[4],
                requirement: selectedList[5],
            },
            success: function (r) {
                console.log(r)
                if (r.data.pages == 0) {
                    $("#table").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = r.data.records;
                    var table = '';
                    list.forEach(function (item, index) {
                        var b = '';
                        if (item.isTop == 1) {
                            b = '<span style="color: #ff552e;font-size: 16px">(置顶)</span>'
                        }
                        if (item.welfareInroduce != '') {
                            if (item.welfareInroduce.length > 20) {
                                item.welfareInroduce = item.welfareInroduce.substring(0, 20) + '...'
                            }
                        }
                        if (item.address != '') {
                            if (item.address.length > 9) {
                                item.address = item.address.substring(0, 9) + '...'
                            }
                        }
                        table += '<div style="width:100%;padding:0 10px">' +
                            '<a style="display:flex;justify-content: space-between;margin-top: 10px;" href="/cultivate/recruitInfo?id=' + item.id + '"><span class="zw_11">' + item.name + '(招' + item.numbers + '人)' + b + '</span>' +
                            '<span class="zw_22">' + item.salaryRange + '/月</span>' +
                            '</a>' +
                            '<span class="zw_33">' +
                            '<span class="zw_4">' + item.address + '</span>' +
                            '<span class="zw_4">' + item.workExperience + '</span>' +
                            '<span class="zw_4">' + item.education + '</span>' +
                            '</span>' +
                            '</div>' +
                            '<div style="margin:10px">' +
                            '<span style="font-size:16px">' + item.orgName + '</span>' +
                            '<span class="gs_2" style="width:100%;margin-bottom:20px">' + item.welfareInroduce + '</span>' +
                            '</div>' +
                            '<div style="float:right;margin:0 10px 10px">' +
                            '<input type="button" id="apply" onclick="apply(\'' + item.id + '\')" value="申请" class="sqBtn" />' +
                            '<input type="button" id="applyed"  value="已申请" class="sqBtn1" />' +
                            '</div><div style="clear: both"></div>' +
                            '<hr style="margin: auto"/>';
                    });
                    table += '<div style="clear: both"></div>';
                    $("#table").html(table);
                    page(1, r.data.pages, $("#name").val(), type);
                }

            }
        })
    }

    function page(num, tolPages, name, type) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                $.ajax({
                    url: "/jzApi/recruitment/selJobList",
                    type: 'GET',
                    data: {
                        current: num,
                        number: 12,
                        name: name,
                        type: type
                    },
                    success: function (res) {
                        var list = res.data.records;
                        var table = '';
                        list.forEach(function (item, index) {
                            var b = '';
                            if (item.isTop == 1) {
                                b = '<span style="color: #ff552e;font-size: 16px">(置顶)</span>'
                            }
                            if (item.welfareInroduce != '') {
                                if (item.welfareInroduce.length > 20) {
                                    item.welfareInroduce = item.welfareInroduce.substring(0, 20) + '...'
                                }
                            }
                            if (item.address != '') {
                                if (item.address.length > 9) {
                                    item.address = item.address.substring(0, 9) + '...'
                                }
                            }
                            table += '<div class="zw">' +
                                '<a href="/cultivate/recruitInfo?id=' + item.id + '"><span class="zw_1">' + item.name + '(招' + item.numbers + '人)' + b + '</span>' +
                                '<span class="zw_2">' + item.salaryRange + '/月</span>' +
                                '<span class="zw_3">' +
                                '<span class="zw_4">' + item.address + '</span>' +
                                '<span class="zw_4">' + item.workExperience + '</span>' +
                                '<span class="zw_4">' + item.education + '</span>' +
                                '</span>' +
                                '</div>' +
                                '<div class="gs">' +
                                '<span class="gs_1">' + item.orgName + '</span>' +
                                '<span class="gs_2">' + item.welfareInroduce + '</span>' +
                                '</div>' +
                                '<div></a>' +
                                '<span class="sq">' +
                                '<input type="button" id="apply" onclick="apply(\'' + item.id + '\')" value="申请" class="sqBtn" />' +
                                '<input type="button" id="applyed"  value="已申请" class="sqBtn1" />' +
                                '</span>' +
                                '</div><div style="clear: both"></div>' +
                                '<hr style="margin: auto"/>';
                        });
                        table += '<div style="clear: both"></div>';
                        $("#table").html(table);
                    }
                });
            }
        });
    }

    $(function () {
        $.ajax({
            url: '/jzApi/recruitment/selScreen',
            type: 'GET',
            data: {},
            success: function (res) {
                var industryList = res.data.industryList;
                var experienceList = res.data.experienceList;
                var moneyList = res.data.moneyList;
                var industry = '<a class="active" onclick="selectBtn(4,null,this)">不限</a>';
                var experience = '<a class="active"  onclick="selectBtn(1,null,this)">不限</a>';
                var money = '<a class="active"  onclick="selectBtn(5,null,this)">不限</a>';
                //岗位类型
                industryList.forEach(function (item, index) {
                    industry += '<a onclick="selectBtn(4,\'' + item.name + '\',this)">' + item.name + '</a>';
                });
                // 薪资
                moneyList.forEach(function (item, index) {
                    money += '<a onclick="selectBtn(5,\'' + item.name + '\',this)">' + item.name + '</a>';
                });
                // 工作经验
                experienceList.forEach(function (item, index) {
                    experience += '<a onclick="selectBtn(1,\'' + item.name + '\',this)">' + item.name + '</a>'
                });
                $('#industry').html($('#industry').html() + industry);
                $('#experience').html($('#experience').html() + experience);
                $('#money').html($('#money').html() + money);

            }
        })
    })
    function selectBtn(type, value, e) {//type: 0工作地点,1工作经验,2学历要求,3公司规模,4岗位类型,5薪资要求
        if (type < 0 || type > 5) {
            return;
        }
        selectedList[type] = value;
        $(e).addClass("active");
        $(e).siblings().removeClass("active");
        $('.title_txt').fadeOut()
        recruit($("#name").val(), 0);

    }

</script>

</html>